<template>
    <div>
        <el-breadcrumb>
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-row>
            <el-col :span="2">
                <el-button type="primary" @click="this.toAdd">添加</el-button>
            </el-col>
            <el-col :span="4">
                <el-input placeholder="请输入物料名称" v-model="keyword" class="input-with-select">
                    <el-button slot="append" @click="this.handlerSearch" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
        </el-row>
        <!-- 分割线 -->
        <el-divider></el-divider>

        <!-- 
        el-table表示表格
        :data对应当前页面中定义的数据集合
    -->
        <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
            <!-- 
            el-table-column表示每一列
            label是表头
            prop是数据的某个属性
        -->
            <el-table-column label="物料编号" prop="id">
            </el-table-column>
            <el-table-column label="物料名称" prop="name">
            </el-table-column>
            <el-table-column label="物料图片" prop="img">
                <template slot-scope="scope">
                    <!--elementui中的表格，如果要显示非纯数据，需要借助template嵌入内容 -->
                    <el-popover placement="right-start" v-if="scope.row.img != null" trigger="hover">
                        <img style="height: 300px;" :src="'http://192.168.124.96:9090/imgs/' + scope.row.img">
                        <img slot="reference" style="height: 100px;" :src="'http://192.168.124.96:9090/imgs/' + scope.row.img">
                    </el-popover>

                    <el-upload v-if="scope.row.img == null" 
                    :data="{ id: scope.row.id }" 
                    name="materialImg"
                    :headers="myHeaders" 
                    :on-success="upload" 
                    action="http://192.168.124.96:9090/material/upload">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>

                </template>
            </el-table-column>
            <el-table-column label="当前库存" prop="count">
            </el-table-column>
            <el-table-column label="计量单位" prop="unit">
            </el-table-column>
            <el-table-column label="安全库存" prop="safeCount">
            </el-table-column>
            <el-table-column label="供应商" prop="supplier">
            </el-table-column>
            <el-table-column label="所在库区" prop="wa.waName">
            </el-table-column>
            <el-table-column label="所在仓库" prop="wa.wh.whName">
            </el-table-column>

            <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                    <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- @size-change  size改变事件 -->
        <!-- @current-change  当前页改变触发 -->
        <!-- total 总记录数 -->
        <!-- current-page 当前页 -->
        <!-- page-size  当前的size-->
        <!-- page-sizes size的选项-->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
            :total="total" :page-sizes="[5, 10, 20, 50]" :page-size="size" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>



        <!-- 表单弹出层 -->
        <el-dialog width="400px" title="用户信息" :visible.sync="dialogFormVisible">
            <!-- :model控制表单中的数据 -->
            <el-form :model="form">

                <el-form-item label="用户编号" :label-width="formLabelWidth">
                    <el-input v-model="form.suId" readonly></el-input>
                </el-form-item>

                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="form.suName"></el-input>
                </el-form-item>
                <el-form-item label="用户角色" :label-width="formLabelWidth">
                    <el-select v-model="form.suRole" placeholder="用户角色">
                        <el-option label="超级管理员" value="ADMIN"></el-option>
                        <el-option label="用户" value="USER"></el-option>
                        <el-option label="游客" value="GUEST"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户邮箱" :label-width="formLabelWidth">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="this.hanldeSubmit">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>
<style>
.map {
    width: 100%;
    height: 600px;
}

.el-form {
    text-align: left;
}
</style>
<script>
//导入qs工具，用于格式化表单数据
import qs from 'qs';
import axios from 'axios'
export default {
    created() {
        this.myHeaders.token = window.localStorage.getItem("token");
        //console.log("+++++++");
        console.log(this.token);
        this.initData()
    },
    data() {
        return {
            tableData: [],
            search: '',
            page: 1,
            size: 5,
            total: 0,
            keyword: '',
            dialogFormVisible: false,
            form: {

            },
            formLabelWidth: '80px',
            myHeaders: {
                token: ''
            }
        }
    },
    methods: {
        upload(res) {
            if (res.code == 0) {
                this.$message({
                    type: "success",
                    message: res.msg
                })
                this.initData()
            } else {
                this.$message({
                    type: "error",
                    message: res.msg
                })
            }
        },
        //搜索，搜索时让page=1
        handlerSearch() {
            this.page = 1;
            this.initData();
        },
        // 初始化数据
        initData() {
            //如果请求时携带参数，可以使用?拼接，不适用参数多的情况
            // axios.get("http://192.168.124.96:9090/warehouse?page="+this.page).then(res => {
            // axios.get("URL",{params:{k:v,k:v}})方式同时携带多个参数
            axios.get("http://192.168.124.96:9090/material",
                {
                    params: {
                        page: this.keyword.length != 0 ? 1 : this.page,
                        size: this.size,
                        keyword: this.keyword
                    }
                }
            ).then(res => {
                if (res.data.code != 0) {
                    this.$message({
                        type: "error",
                        message: res.data.msg
                    })
                    this.$router.replace("/")
                    return;
                }
                // console.log(res.data.obj);
                //res.data是ResultData，其中包含了code msg obj data 
                //这里调用的分页查询，返回值中包含了一个分页模型对象obj
                //获取分页查询到的集合
                this.tableData = res.data.obj.records;
                //更改total的值
                this.total = res.data.obj.total;
            });
        },
        toAdd() {
            //显示对话框
            this.dialogFormVisible = true;
            //初始化表单
            this.form = { whCapacity: 10000 };
        },
        //表单提交事件
        hanldeSubmit() {
            console.log(this.form);

            //发送post或put请求时，通常为添加或修改，参数比较多，可以使用params构造参数
            //这里使用qs工具的qs.stringify(this.form)将表单对象进行解析，在请求时一起发送
            //axios.post("url",qs.stringify(表单对象)).then()
            axios.post("http://192.168.124.96:9090/sysUser", qs.stringify(this.form)).then(res => {
                if (res.data.code == 0) {
                    this.$message({
                        type: "success",
                        message: res.data.msg
                    })
                    this.dialogFormVisible = false;
                }
            })
        },
        handleEdit(index, row) {
            console.log(index, row);
            //显示对话框
            this.dialogFormVisible = true;

            //填充表单
            this.form = row;
        },
        handleDelete(index, row) {
            //index表示当前行的索引
            //row表示当前行的数据
            //确认框
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //点击确认后执行
                //发送delete请求
                axios.delete("http://192.168.124.96:9090/sysUser/" + row.suId).then(res => {
                    //删除成功后使用消息框显示
                    if (res.data.code == 0) {
                        //回到第一页
                        this.page = 1;
                        //删除成功后重新加载数据
                        this.initData()
                        this.$message({
                            type: 'success',
                            message: res.data.msg
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.data.msg
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        handleSizeChange(val) {
            //更新size
            this.size = val;
            this.initData()
        },
        handleCurrentChange(val) {
            //更新page
            this.page = val;
            this.initData()
        }
    },
}
</script>